{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>山城重庆 - 登录</title>
    <link rel="stylesheet" href="{% static 'css/public.css' %}">
    <link rel="stylesheet" href="{% static 'css/denglu.css' %}">
    <script src="{% static 'js/jquery-3.7.1.min.js' %}"></script>

    <script>
        $(document).ready(function() {
            $('#login-form').on('submit', function(event) {
                event.preventDefault();
                $.ajax({
                    type: 'POST',
                    url: '/denglu',
                    data: $(this).serialize(),
                    success: function(response) {
                        if (response.success) {
                                window.location.href = '/index'
                        } else {
                             $('#error_message').text(response.message)
                        }
                    },
                    error: function(response) {
                        alert('Error occurred while registering.');
                        console.log(response.responseText);
                    }
                });
            });
        });
    </script>
</head>
<body>
    <header>
        <div class="top">
            <h1><a href="index">美丽家乡之重庆</a></h1>
            <nav>
                <ul>
                    <li><a href="index">首页</a></li>
                    <li><a href="jianjie">重庆简介</a></li>
                    <li><a href="wenhua">历史文化</a></li>
                    <li><a href="meishi">美食特色</a></li>
                    <li><a href="gonglve">旅游攻略</a></li>
                    <li><a href="denglu">登录/注册</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <div class="login-container">
        <h2 class="login-title">山城重庆 - 登录</h2>
        <form method="post" id="login-form">
            {% csrf_token %}
            <div class="form-group">
                <label for="username">用户名</label>
                <input type="text" id="username" name="username" required>
            </div>
            <div class="form-group">
                <label for="password">密码</label>
                <input type="password" id="password" name="password" required>
            </div>
            <span id="error_message" style="color:red"></span>
            <button type="submit" class="login-button">登录</button>
        </form>
        <div class="additional-links">
            <a href="zhuce">注册</a>
            {% comment %} <a href="#">忘记密码?</a> {% endcomment %}
        </div>
    </div>
    <footer>
        <p>&copy; 2024 美丽家乡之重庆 王敏 唐园园 王嘉钰 版权所有</p>
    </footer>
</body>
</html>